<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie ie7 lt-ie9 lt-ie8"        lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie ie8 lt-ie9"               lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="ie ie9"                      lang="en"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-ie">
<!--<![endif]-->

<head>
   <!-- Meta-->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
   <meta name="description" content="">
   <meta name="keywords" content="">
   <meta name="author" content="">
   <title>47Admin - Bootstrap Admin Skin</title>
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
   <!-- Bootstrap CSS-->
   <link rel="stylesheet" href="app/css/bootstrap.css">
   <!-- Vendor CSS-->
   <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="vendor/animo/animate+animo.css">
   <link rel="stylesheet" href="vendor/csspinner/csspinner.min.css">
   <!-- START Page Custom CSS-->
   <!-- END Page Custom CSS-->
   <!-- App CSS-->
   <link rel="stylesheet" href="app/css/app.css">
   <!-- Modernizr JS Script-->
   <script src="vendor/modernizr/modernizr.js" type="application/javascript"></script>
   <!-- FastClick for mobiles-->
   <script src="vendor/fastclick/fastclick.js" type="application/javascript"></script>
</head>

<body>
   <!-- START Main wrapper-->
   <section class="wrapper">
      <!-- START Top Navbar-->
      <nav role="navigation" class="navbar navbar-default navbar-top navbar-fixed-top">
         <!-- START navbar header-->
         <div class="navbar-header">
            <a href="#" class="navbar-brand">
               <div class="brand-logo">47Admin</div>
               <div class="brand-logo-collapsed">47</div>
            </a>
         </div>
         <!-- END navbar header-->
         <!-- START Nav wrapper-->
         <div class="nav-wrapper">
            <!-- START Left navbar-->
            <ul class="nav navbar-nav">
               <li>
                  <a href="#" data-toggle="aside">
                     <em class="fa fa-align-left"></em>
                  </a>
               </li>
               <li>
                  <a href="#" data-toggle="navbar-search">
                     <em class="fa fa-search"></em>
                  </a>
               </li>
            </ul>
            <!-- END Left navbar-->
            <!-- START Right Navbar-->
            <ul class="nav navbar-nav navbar-right">
               <!-- START Messages menu (dropdown-list)-->
               <li class="dropdown dropdown-list">
                  <a href="#" data-toggle="dropdown" data-play="bounceIn" class="dropdown-toggle">
                     <em class="fa fa-envelope"></em>
                     <div class="label label-danger">300</div>
                  </a>
                  <!-- START Dropdown menu-->
                  <ul class="dropdown-menu">
                     <li class="dropdown-menu-header">You have 5 new messages</li>
                     <li>
                        <div class="scroll-viewport">
                           <!-- START list group-->
                           <div class="list-group scroll-content">
                              <!-- START list group item-->
                              <a href="#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img style="width: 48px; height: 48px;" src="app/img/user/01.jpg" alt="Image" class="media-object img-rounded">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">2h</small>
                                       <strong class="media-heading text-primary">
                                          <div class="point point-success point-lg"></div>Sheila Carter</strong>
                                       <p class="mb-sm">
                                          <small>Cras sit amet nibh libero, in gravida nulla. Nulla...</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img style="width: 48px; height: 48px;" src="app/img/user/04.jpg" alt="Image" class="media-object img-rounded">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">3h</small>
                                       <strong class="media-heading text-primary">
                                          <div class="point point-success point-lg"></div>Rich Reynolds</strong>
                                       <p class="mb-sm">
                                          <small>Cras sit amet nibh libero, in gravida nulla. Nulla...</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img style="width: 48px; height: 48px;" src="app/img/user/03.jpg" alt="Image" class="media-object img-rounded">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">4h</small>
                                       <strong class="media-heading text-primary">
                                          <div class="point point-danger point-lg"></div>Beverley Pierce</strong>
                                       <p class="mb-sm">
                                          <small>Cras sit amet nibh libero, in gravida nulla. Nulla...</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img style="width: 48px; height: 48px;" src="app/img/user/05.jpg" alt="Image" class="media-object img-rounded">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">4h</small>
                                       <strong class="media-heading text-primary">
                                          <div class="point point-danger point-lg"></div>Perry Cole</strong>
                                       <p class="mb-sm">
                                          <small>Cras sit amet nibh libero, in gravida nulla. Nulla...</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img style="width: 48px; height: 48px;" src="app/img/user/06.jpg" alt="Image" class="media-object img-rounded">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">4h</small>
                                       <strong class="media-heading text-primary">
                                          <div class="point point-danger point-lg"></div>Carolyn Carpenter</strong>
                                       <p class="mb-sm">
                                          <small>Cras sit amet nibh libero, in gravida nulla. Nulla...</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                           </div>
                           <!-- END list group-->
                        </div>
                     </li>
                     <!-- START dropdown footer-->
                     <li class="p">
                        <a href="#" class="text-center">
                           <small class="text-primary">READ ALL</small>
                        </a>
                     </li>
                     <!-- END dropdown footer-->
                  </ul>
                  <!-- END Dropdown menu-->
               </li>
               <!-- END Messages menu (dropdown-list)-->
               <!-- START Alert menu-->
               <li class="dropdown dropdown-list">
                  <a href="#" data-toggle="dropdown" data-play="bounceIn" class="dropdown-toggle">
                     <em class="fa fa-bell"></em>
                     <div class="label label-info">120</div>
                  </a>
                  <!-- START Dropdown menu-->
                  <ul class="dropdown-menu">
                     <li>
                        <!-- START list group-->
                        <div class="list-group">
                           <!-- list item-->
                           <a href="#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-envelope-o fa-2x text-success"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <div class="media-heading">Unread messages</div>
                                    <p class="m0">
                                       <small>You have 10 unread messages</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- list item-->
                           <a href="#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-cog fa-2x"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <div class="media-heading">New settings</div>
                                    <p class="m0">
                                       <small>There are new settings available</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- list item-->
                           <a href="#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-fire fa-2x"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <div class="media-heading">Updates</div>
                                    <p class="m0">
                                       <small>There are
                                          <span class="text-primary">2</span>new updates available</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- last list item -->
                           <a href="#" class="list-group-item">
                              <small>Unread notifications</small>
                              <span class="badge">14</span>
                           </a>
                        </div>
                        <!-- END list group-->
                     </li>
                  </ul>
                  <!-- END Dropdown menu-->
               </li>
               <!-- END Alert menu-->
               <!-- START User menu-->
               <li class="dropdown">
                  <a href="#" data-toggle="dropdown" data-play="bounceIn" class="dropdown-toggle">
                     <em class="fa fa-user"></em>
                  </a>
                  <!-- START Dropdown menu-->
                  <ul class="dropdown-menu">
                     <li>
                        <div class="p">
                           <p>Overall progress</p>
                           <div class="progress progress-striped progress-xs m0">
                              <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;" class="progress-bar progress-bar-success">
                                 <span class="sr-only">80% Complete</span>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li class="divider"></li>
                     <li><a href="#">Profile</a>
                     </li>
                     <li><a href="#">Settings</a>
                     </li>
                     <li><a href="#">Notifications<div class="label label-info pull-right">5</div></a>
                     </li>
                     <li><a href="#">Messages<div class="label label-danger pull-right">10</div></a>
                     </li>
                     <li><a href="#">Logout</a>
                     </li>
                  </ul>
                  <!-- END Dropdown menu-->
               </li>
               <!-- END User menu-->
               <!-- START Contacts button-->
               <li>
                  <a href="#" data-toggle="offsidebar">
                     <em class="fa fa-align-right"></em>
                  </a>
               </li>
               <!-- END Contacts menu-->
            </ul>
            <!-- END Right Navbar-->
         </div>
         <!-- END Nav wrapper-->
         <!-- START Search form-->
         <form role="search" class="navbar-form">
            <div class="form-group has-feedback">
               <input type="text" placeholder="Type and hit Enter.." class="form-control">
               <div data-toggle="navbar-search-dismiss" class="fa fa-times form-control-feedback"></div>
            </div>
            <button type="submit" class="hidden btn btn-default">Submit</button>
         </form>
         <!-- END Search form-->
      </nav>
      <!-- END Top Navbar-->
      <!-- START aside-->
      <aside class="aside">
         <!-- START Sidebar (left)-->
         <nav class="sidebar">
            <ul class="nav">
               <!-- START user info-->
               <li>
                  <div data-toggle="collapse-next" class="item user-block has-submenu">
                     <!-- User picture-->
                     <div class="user-block-picture">
                        <img src="app/img/user/02.jpg" alt="Avatar" width="60" height="60" class="img-thumbnail img-circle">
                        <!-- Status when collapsed-->
                        <div class="user-block-status">
                           <div class="point point-success point-lg"></div>
                        </div>
                     </div>
                     <!-- Name and Role-->
                     <div class="user-block-info">
                        <span class="user-block-name item-text">Welcome, Alex</span>
                        <span class="user-block-role">Designer</span>
                        <!-- START Dropdown to change status-->
                        <div class="btn-group user-block-status">
                           <button type="button" data-toggle="dropdown" data-play="fadeIn" data-duration="0.2" class="btn btn-xs dropdown-toggle">
                              <div class="point point-success"></div>Online</button>
                           <ul class="dropdown-menu text-left pull-right">
                              <li>
                                 <a href="#">
                                    <div class="point point-success"></div>Online</a>
                              </li>
                              <li>
                                 <a href="#">
                                    <div class="point point-warning"></div>Away</a>
                              </li>
                              <li>
                                 <a href="#">
                                    <div class="point point-danger"></div>Busy</a>
                              </li>
                           </ul>
                        </div>
                        <!-- END Dropdown to change status-->
                     </div>
                  </div>
                  <!-- START User links collapse-->
                  <ul class="nav collapse">
                     <li><a href="#">Profile</a>
                     </li>
                     <li><a href="#">Settings</a>
                     </li>
                     <li><a href="#">Notifications<div class="label label-danger pull-right">120</div></a>
                     </li>
                     <li><a href="#">Messages<div class="label label-success pull-right">300</div></a>
                     </li>
                     <li class="divider"></li>
                     <li><a href="#">Logout</a>
                     </li>
                  </ul>
                  <!-- END User links collapse-->
               </li>
               <!-- END user info-->
               <!-- START Menu-->
               <li>
                  <a href="dashboard.html" title="Dashboard" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-dashboard"></em>
                     <div class="label label-primary pull-right">12</div>
                     <span class="item-text">Dashboard</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="dashboard.html" title="Default" data-toggle="" class="no-submenu">
                           <span class="item-text">Default</span>
                        </a>
                     </li>
                     <li>
                        <a href="dashboard-nosidebar.html" title="No Sidebar" data-toggle="" class="no-submenu">
                           <div class="label label-primary pull-right">new</div>
                           <span class="item-text">No Sidebar</span>
                        </a>
                     </li>
                     <li>
                        <a href="dashboard-noprofile.html" title="No Profile" data-toggle="" class="no-submenu">
                           <div class="label label-primary pull-right">new</div>
                           <span class="item-text">No Profile</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="#" title="Charts" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-bar-chart-o"></em>
                     <span class="item-text">Charts</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="chart-flot.html" title="Flot" data-toggle="" class="no-submenu">
                           <span class="item-text">Flot</span>
                        </a>
                     </li>
                     <li>
                        <a href="http://www.weidea.net" title="Radial" data-toggle="" class="no-submenu">
                           <span class="item-text">Radial</span>
                        </a>
                     </li><li>
                        <a href="chart-radial.html" title="Radial" data-toggle="" class="no-submenu">
                           <span class="item-text">More</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li class="active">
                  <a href="#" title="Tables" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-table"></em>
                     <span class="item-text">Tables</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse in">
                     <li>
                        <a href="table-datatable.html" title="Data Table" data-toggle="" class="no-submenu">
                           <span class="item-text">Data Table</span>
                        </a>
                     </li>
                     <li>
                        <a href="table-standard.html" title="Standard" data-toggle="" class="no-submenu">
                           <span class="item-text">Standard</span>
                        </a>
                     </li>
                     <li class="active">
                        <a href="table-extended.html" title="Extended" data-toggle="" class="no-submenu">
                           <span class="item-text">Extended</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="#" title="Forms" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-edit"></em>
                     <span class="item-text">Forms</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="form-standard.html" title="Standard" data-toggle="" class="no-submenu">
                           <span class="item-text">Standard</span>
                        </a>
                     </li>
                     <li>
                        <a href="form-extended.html" title="Extended" data-toggle="" class="no-submenu">
                           <div class="label label-primary pull-right">new</div>
                           <span class="item-text">Extended</span>
                        </a>
                     </li>
                     <li>
                        <a href="form-validation.html" title="Validation" data-toggle="" class="no-submenu">
                           <span class="item-text">Validation</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="#" title="Elements" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-wrench"></em>
                     <span class="item-text">Elements</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="panels.html" title="Panels" data-toggle="" class="no-submenu">
                           <div class="label label-primary pull-right">new</div>
                           <span class="item-text">Panels</span>
                        </a>
                     </li>
                     <li>
                        <a href="portlets.html" title="Portlets" data-toggle="" class="no-submenu">
                           <span class="item-text">Portlets</span>
                        </a>
                     </li>
                     <li>
                        <a href="button.html" title="Buttons" data-toggle="" class="no-submenu">
                           <span class="item-text">Buttons</span>
                        </a>
                     </li>
                     <li>
                        <a href="icons.html" title="Icons" data-toggle="" class="no-submenu">
                           <div class="label label-primary pull-right">+400</div>
                           <span class="item-text">Icons</span>
                        </a>
                     </li>
                     <li>
                        <a href="notifications.html" title="Notifications" data-toggle="" class="no-submenu">
                           <span class="item-text">Notifications</span>
                        </a>
                     </li>
                     <li>
                        <a href="typo.html" title="Typography" data-toggle="" class="no-submenu">
                           <span class="item-text">Typography</span>
                        </a>
                     </li>
                     <li>
                        <a href="grid.html" title="Grid" data-toggle="" class="no-submenu">
                           <span class="item-text">Grid</span>
                        </a>
                     </li>
                     <li>
                        <a href="grid-masonry.html" title="Grid Masonry" data-toggle="" class="no-submenu">
                           <span class="item-text">Grid Masonry</span>
                        </a>
                     </li>
                     <li>
                        <a href="animations.html" title="Animations" data-toggle="" class="no-submenu">
                           <span class="item-text">Animations</span>
                        </a>
                     </li>
                     <li>
                        <a href="dropdown-animations.html" title="Dropdown" data-toggle="" class="no-submenu">
                           <span class="item-text">Dropdown</span>
                        </a>
                     </li>
                     <li>
                        <a href="widgets.html" title="Widgets" data-toggle="" class="no-submenu">
                           <span class="item-text">Widgets</span>
                        </a>
                     </li>
                     <li>
                        <a href="maps.html" title="Maps" data-toggle="" class="no-submenu">
                           <span class="item-text">Maps</span>
                        </a>
                     </li>
                     <li>
                        <a href="calendar.html" title="Calendar" data-toggle="" class="no-submenu">
                           <span class="item-text">Calendar</span>
                        </a>
                     </li>
                     <li>
                        <a href="spinners.html" title="Spinners" data-toggle="" class="no-submenu">
                           <div class="label label-primary pull-right">new</div>
                           <span class="item-text">Spinners</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="#" title="Pages" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-file-text"></em>
                     <div class="label label-primary pull-right">new</div>
                     <span class="item-text">Pages</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="pages/landing.html" title="Landing" data-toggle="" class="no-submenu">
                           <span class="item-text">Landing</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/login.html" title="Login" data-toggle="" class="no-submenu">
                           <span class="item-text">Login</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/login-multi.html" title="Login Multi" data-toggle="" class="no-submenu">
                           <span class="item-text">Login Multi</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/signup.html" title="Sign up" data-toggle="" class="no-submenu">
                           <span class="item-text">Sign up</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/lock.html" title="Lock" data-toggle="" class="no-submenu">
                           <span class="item-text">Lock</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/recover.html" title="Recover Password" data-toggle="" class="no-submenu">
                           <span class="item-text">Recover Password</span>
                        </a>
                     </li>
                     <li>
                        <a href="template.html" title="Empty Template" data-toggle="" class="no-submenu">
                           <span class="item-text">Empty Template</span>
                        </a>
                     </li>
                     <li>
                        <a href="timeline.html" title="Timeline" data-toggle="" class="no-submenu">
                           <span class="item-text">Timeline</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <!-- END Menu-->
               <!-- Sidebar footer    -->
               <li class="nav-footer">
                  <div class="nav-footer-divider"></div>
                  <!-- START button group-->
                  <div class="btn-group text-center">
                     <button type="button" data-toggle="tooltip" data-title="Add Contact" class="btn btn-link">
                        <em class="fa fa-user text-muted"><sup class="fa fa-plus"></sup>
                        </em>
                     </button>
                     <button type="button" data-toggle="tooltip" data-title="Settings" class="btn btn-link">
                        <em class="fa fa-cog text-muted"></em>
                     </button>
                     <button type="button" data-toggle="tooltip" data-title="Logout" class="btn btn-link">
                        <em class="fa fa-sign-out text-muted"></em>
                     </button>
                  </div>
                  <!-- END button group-->
               </li>
            </ul>
         </nav>
         <!-- END Sidebar (left)-->
      </aside>
      <!-- End aside-->
      <!-- START aside-->
      <aside class="offsidebar">
         <!-- START Off Sidebar (right)-->
         <nav>
            <ul class="nav">
               <!-- START user info-->
               <li>
                  <div class="item">
                     <div style="background-image: url('app/img/offsidebar-bg.jpg')" class="p-lg">
                        <div class="text-center">
                           <p>
                              <img src="app/img/user/02.jpg" style="width: 64px; height: 64px" alt="Image" class="img-circle img-thumbnail">
                           </p>
                           <p class="text-white">
                              <strong>Alex</strong>
                           </p>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- END user info-->
               <!-- START list title-->
               <li class="p">
                  <small class="text-muted">ONLINE</small>
               </li>
               <!-- END list title-->
               <li>
                  <!-- START User status-->
                  <a href="#" class="media p mt0">
                     <span class="pull-right">
                        <span class="point point-success point-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/05.jpg" style="width: 40px; height: 40px" alt="Image" class="media-object img-circle">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong class="text-white">Tommy Sam</strong>
                           <br>
                           <small class="text-muted">tommy39</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="#" class="media p mt0">
                     <span class="pull-right">
                        <span class="point point-success point-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/06.jpg" style="width: 40px; height: 40px" alt="Image" class="media-object img-circle">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong class="text-white">Beverley Pierce</strong>
                           <br>
                           <small class="text-muted">be40210</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="#" class="media p mt0">
                     <span class="pull-right">
                        <span class="point point-danger point-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/07.jpg" style="width: 40px; height: 40px" alt="Image" class="media-object img-circle">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong class="text-white">Victor Long</strong>
                           <br>
                           <small class="text-muted">longlong</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="#" class="media p mt0">
                     <span class="pull-right">
                        <span class="point point-warning point-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/08.jpg" style="width: 40px; height: 40px" alt="Image" class="media-object img-circle">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong class="text-white">Danielle Berry</strong>
                           <br>
                           <small class="text-muted">hunter49</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
               </li>
               <!-- START list title-->
               <li class="p">
                  <small class="text-muted">OFFLINE</small>
               </li>
               <!-- END list title-->
               <li>
                  <!-- START User status-->
                  <a href="#" class="media p mt0">
                     <span class="pull-right">
                        <span class="point point-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/09.jpg" style="width: 40px; height: 40px" alt="Image" class="media-object img-circle">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong class="text-white">Bertha Cooper</strong>
                           <br>
                           <small class="text-muted">ber123</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="#" class="media p mt0">
                     <span class="pull-right">
                        <span class="point point-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/10.jpg" style="width: 40px; height: 40px" alt="Image" class="media-object img-circle">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong class="text-white">Anne Curtis</strong>
                           <br>
                           <small class="text-muted">anni</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
               </li>
               <li>
                  <!-- Optional link to list more users-->
                  <a href="#" title="See more contacts" class="p">
                     <strong>
                        <small class="text-muted">&hellip;</small>
                     </strong>
                  </a>
               </li>
            </ul>
         </nav>
         <!-- END Off Sidebar (right)-->
      </aside>
      <!-- END aside-->
      <!-- START Main section-->
      <section>
         <!-- START Page content-->
         <section class="main-content">
            <h3>Tables
               <br>
               <small>A showcase of different components inside tables</small>
            </h3>
            <!-- START panel-->
            <div class="panel panel-default">
               <div class="panel-heading">Demo Table #1
                  <a href="#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                     <em class="fa fa-times"></em>
                  </a>
                  <a href="#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                     <em class="fa fa-minus"></em>
                  </a>
               </div>
               <!-- START table-responsive-->
               <div class="table-responsive">
                  <table class="table table-bordered table-hover">
                     <thead>
                        <tr>
                           <th style="width: 3%">UID</th>
                           <th style="width: 5%">Picture</th>
                           <th>Username</th>
                           <th>First Name</th>
                           <th>Last Name</th>
                           <th>Email</th>
                           <th style="width: 5%">Profile</th>
                           <th>Last Login</th>
                           <th style="width: 5%" class="check-all">
                              <div data-toggle="tooltip" data-title="Check All" class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr>
                           <td>1</td>
                           <td>
                              <div class="media">
                                 <img src="app/img/user/01.jpg" alt="Image" class="img-responsive img-circle">
                              </div>
                           </td>
                           <td>@twitter</td>
                           <td>Larry</td>
                           <td>the Bird</td>
                           <td>mail@example.com</td>
                           <td class="text-center">
                              <div data-label="25%" class="radial-bar radial-bar-25 radial-bar-xs"></div>
                           </td>
                           <td>1 week</td>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>2</td>
                           <td>
                              <div class="media">
                                 <img src="app/img/user/02.jpg" alt="Image" class="img-responsive img-circle">
                              </div>
                           </td>
                           <td>@mdo</td>
                           <td>Mark</td>
                           <td>Otto</td>
                           <td>mail@example.com</td>
                           <td class="text-center">
                              <div data-label="50%" class="radial-bar radial-bar-50 radial-bar-xs"></div>
                           </td>
                           <td>25 minutes</td>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>3</td>
                           <td>
                              <div class="media">
                                 <img src="app/img/user/03.jpg" alt="Image" class="img-responsive img-circle">
                              </div>
                           </td>
                           <td>@fat</td>
                           <td>Jacob</td>
                           <td>Thornton</td>
                           <td>mail@example.com</td>
                           <td class="text-center">
                              <div data-label="80%" class="radial-bar radial-bar-80 radial-bar-xs"></div>
                           </td>
                           <td>10 hours</td>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <!-- END table-responsive-->
               <div class="panel-footer">
                  <div class="row">
                     <div class="col-lg-2">
                        <div class="input-group">
                           <input type="text" placeholder="Search" class="input-sm form-control">
                           <span class="input-group-btn">
                              <button type="button" class="btn btn-sm btn-default">Search</button>
                           </span>
                        </div>
                     </div>
                     <div class="col-lg-8"></div>
                     <div class="col-lg-2">
                        <div class="input-group pull-right">
                           <select class="input-sm form-control">
                              <option value="0">Bulk action</option>
                              <option value="1">Delete</option>
                              <option value="2">Clone</option>
                              <option value="3">Export</option>
                           </select>
                           <span class="input-group-btn">
                              <button class="btn btn-sm btn-default">Apply</button>
                           </span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- END panel-->
            <!-- START panel-->
            <div class="panel panel-default">
               <div class="panel-heading">Demo Table #2
                  <a href="#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                     <em class="fa fa-times"></em>
                  </a>
                  <a href="#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                     <em class="fa fa-minus"></em>
                  </a>
               </div>
               <!-- START table-responsive-->
               <div class="table-responsive">
                  <table class="table table-striped table-bordered table-hover">
                     <thead>
                        <tr>
                           <th style="width: 5%" class="check-all">
                              <div data-toggle="tooltip" data-title="Check All" class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </th>
                           <th>Description</th>
                           <th style="width: 10%">Active</th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                           <td>
                              <div class="media">
                                 <a href="#" class="pull-left">
                                    <img src="app/img/user/01.jpg" class="media-object img-responsive img-circle">
                                 </a>
                                 <div class="media-body">
                                    <div class="pull-right badge baed-info">admin</div>
                                    <h4 class="media-heading">Holly Wallace</h4>
                                    <p>Username: holly123</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
                                    nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
                              </div>
                           </td>
                           <td class="text-center">
                              <label class="switch">
                                 <input type="checkbox">
                                 <span></span>
                              </label>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                           <td>
                              <div class="media">
                                 <a href="#" class="pull-left">
                                    <img src="app/img/user/03.jpg" class="media-object img-responsive img-circle">
                                 </a>
                                 <div class="media-body">
                                    <div class="pull-right badge baed-info">writer</div>
                                    <h4 class="media-heading">Alexis Foster</h4>
                                    <p>Username: ali89</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                                    vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
                              </div>
                           </td>
                           <td class="text-center">
                              <label class="switch">
                                 <input type="checkbox" checked>
                                 <span></span>
                              </label>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                           <td>
                              <div class="media">
                                 <a href="#" class="pull-left">
                                    <img src="app/img/user/05.jpg" class="media-object img-responsive img-circle">
                                 </a>
                                 <div class="media-body">
                                    <div class="pull-right badge baed-info">editor</div>
                                    <h4 class="media-heading">Mario Miles</h4>
                                    <p>Username: mariomiles</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                                    ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
                              </div>
                           </td>
                           <td class="text-center">
                              <label class="switch">
                                 <input type="checkbox" checked>
                                 <span></span>
                              </label>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <!-- END table-responsive-->
               <div class="panel-footer">
                  <div class="row">
                     <div class="col-lg-2">
                        <div class="input-group pull-right">
                           <select class="input-sm form-control">
                              <option value="0">Bulk action</option>
                              <option value="1">Delete</option>
                              <option value="2">Clone</option>
                              <option value="3">Export</option>
                           </select>
                           <span class="input-group-btn">
                              <button class="btn btn-sm btn-default">Apply</button>
                           </span>
                        </div>
                     </div>
                     <div class="col-lg-8"></div>
                     <div class="col-lg-2 text-right">
                        <ul class="pagination pagination-sm">
                           <li class="active"><a href="#">1</a>
                           </li>
                           <li><a href="#">2</a>
                           </li>
                           <li><a href="#">3</a>
                           </li>
                           <li><a href="#">»</a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            <!-- END panel-->
            <!-- START row-->
            <div class="row">
               <div class="col-lg-6">
                  <!-- START panel-->
                  <div class="panel panel-default">
                     <div class="panel-heading">Demo Table #3
                        <a href="#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                           <em class="fa fa-times"></em>
                        </a>
                        <a href="#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                           <em class="fa fa-minus"></em>
                        </a>
                     </div>
                     <!-- START table-responsive-->
                     <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover">
                           <thead>
                              <tr>
                                 <th>Task name</th>
                                 <th>Progress</th>
                                 <th>Deadline</th>
                                 <th>Action</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td>Nunc luctus, quam non condimentum ornare</td>
                                 <td>
                                    <div class="progress progress-striped progress-xs">
                                       <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;" class="progress-bar progress-bar-success">
                                          <span class="sr-only">80% Complete</span>
                                       </div>
                                    </div>
                                 </td>
                                 <td>05/05/2014</td>
                                 <td class="text-center">
                                    <div class="btn-group"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i></a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="#">Action</a>
                                          </li>
                                          <li><a href="#">Another action</a>
                                          </li>
                                          <li><a href="#">Something else here</a>
                                          </li>
                                          <li class="divider"></li>
                                          <li><a href="#">Separated link</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>Integer in convallis felis.</td>
                                 <td>
                                    <div class="progress progress-striped progress-xs">
                                       <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;" class="progress-bar progress-bar-danger">
                                          <span class="sr-only">20% Complete</span>
                                       </div>
                                    </div>
                                 </td>
                                 <td>15/05/2014</td>
                                 <td class="text-center">
                                    <div class="btn-group"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i></a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="#">Action</a>
                                          </li>
                                          <li><a href="#">Another action</a>
                                          </li>
                                          <li><a href="#">Something else here</a>
                                          </li>
                                          <li class="divider"></li>
                                          <li><a href="#">Separated link</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>Nullam sit amet magna vestibulum libero dapibus iaculis.</td>
                                 <td>
                                    <div class="progress progress-striped progress-xs">
                                       <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" class="progress-bar progress-bar-info">
                                          <span class="sr-only">50% Complete</span>
                                       </div>
                                    </div>
                                 </td>
                                 <td>05/10/2014</td>
                                 <td class="text-center">
                                    <div class="btn-group"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i></a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="#">Action</a>
                                          </li>
                                          <li><a href="#">Another action</a>
                                          </li>
                                          <li><a href="#">Something else here</a>
                                          </li>
                                          <li class="divider"></li>
                                          <li><a href="#">Separated link</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                     <!-- END table-responsive-->
                  </div>
                  <!-- END panel-->
               </div>
               <div class="col-lg-6">
                  <!-- START panel-->
                  <div class="panel panel-default">
                     <div class="panel-heading">Demo Table #4
                        <a href="#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                           <em class="fa fa-times"></em>
                        </a>
                        <a href="#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                           <em class="fa fa-minus"></em>
                        </a>
                     </div>
                     <!-- START table-responsive-->
                     <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover">
                           <thead>
                              <tr>
                                 <th>Project</th>
                                 <th>Activity</th>
                                 <th>Completion</th>
                                 <th>Take action</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td>Bootstrap 5.x</td>
                                 <td>
                                    <span data-bar-color="danger" class="inlinesparkline">1,4,4,7,5,9,10</span>
                                 </td>
                                 <td>
                                    <div class="label label-danger">Canceled</div>
                                 </td>
                                 <td class="text-center">
                                    <div class="btn-group">
                                       <a href="#" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">
                                          <em class="fa fa-angle-down"></em>Action</a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="#">Cancel</a>
                                          </li>
                                          <li><a href="#">Delay</a>
                                          </li>
                                          <li><a href="#">Re Plan </a>
                                          </li>
                                          <li><a href="#">Invoke meeting</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>Web Engine</td>
                                 <td>
                                    <span data-bar-color="success" class="inlinesparkline">1,4,4,10,5,9,2</span>
                                 </td>
                                 <td>
                                    <div class="label label-success">Complete</div>
                                 </td>
                                 <td class="text-center">
                                    <div class="btn-group">
                                       <a href="#" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">
                                          <em class="fa fa-angle-down"></em>Action</a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="#">Cancel</a>
                                          </li>
                                          <li><a href="#">Delay</a>
                                          </li>
                                          <li><a href="#">Re Plan </a>
                                          </li>
                                          <li><a href="#">Invoke meeting</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>Nullam sit amet</td>
                                 <td>
                                    <span data-bar-color="warning" class="inlinesparkline">1,4,4,7,5,9,4</span>
                                 </td>
                                 <td>
                                    <div class="label label-warning">Delayed</div>
                                 </td>
                                 <td class="text-center">
                                    <div class="btn-group">
                                       <a href="#" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">
                                          <em class="fa fa-angle-down"></em>Action</a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="#">Cancel</a>
                                          </li>
                                          <li><a href="#">Delay</a>
                                          </li>
                                          <li><a href="#">Re Plan </a>
                                          </li>
                                          <li><a href="#">Invoke meeting</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                     <!-- END table-responsive-->
                  </div>
                  <!-- END panel-->
               </div>
            </div>
            <!-- END row-->
         </section>
         <!-- END Page content-->
      </section>
      <!-- END Main section-->
   </section>
   <!-- END Main wrapper-->
   <!-- START Scripts-->
   <!-- Main vendor Scripts-->
   <script src="vendor/jquery/jquery.min.js"></script>
   <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
   <!-- Plugins-->
   <script src="vendor/chosen/chosen.jquery.min.js"></script>
   <script src="vendor/slider/js/bootstrap-slider.js"></script>
   <script src="vendor/filestyle/bootstrap-filestyle.min.js"></script>
   <!-- Animo-->
   <script src="vendor/animo/animo.min.js"></script>
   <!-- Sparklines-->
   <script src="vendor/sparklines/jquery.sparkline.min.js"></script>
   <!-- Slimscroll-->
   <script src="vendor/slimscroll/jquery.slimscroll.min.js"></script>
   <!-- START Page Custom Script-->
   <!-- END Page Custom Script-->
   <!-- App Main-->
   <script src="app/js/app.js"></script>
   <!-- END Scripts-->
</body>

</html>